//综合统计
import { useEffect,useState } from 'react';
import { Card, Descriptions } from 'antd';
// 引入子组件
import HeadButton from "./componet/HeadButton";

import { getFinanceApi} from '@/api/finance';
import {htmlToImgPdf} from '@/utils/htmlToImgPdf'
import './css/index.less'




function SynthesizeFinance() {
   const [OrderItem,setOrderItem] = useState({
    saleAmount: '',
    effectiveOrderNum: '',
    effectiveOrderAmount: '',
    invalidOrderNum: '',
    invalidOrderAmount: '',
    doneOderNum: '',
    doneOrderAmount: '',
   })
   const [VipItem,setVipItem] = useState({
    userNum: '10000',
    effectiveOrderUser: '10000',
    userOrderNum: '10000',
    userOderAmount: '1000',
    buyPercentage: '1000',
    averageOrderNum: '1000',
    averageBuy: '1000',
  })
  //  const getOrderData = async(val :string)=>{
  //   const {data} = await getOrderApi(val)
  //   setOrderItem(data.orderData)
  // }
  //  const getVipData = async(val :string)=>{
  //   const {data} = await getVipApi(val)
  //   setVipItem(data.vipData)
  // }
  const getFinanceData = async(val ?:string)=>{
    const {data:{order,vip}} = await getFinanceApi(val)
    setOrderItem(order)
    setVipItem(vip)
  }
 
  useEffect(()=>{
    // getOrderData('all')
    // getVipData('all')
    getFinanceData()
  },[])

  let canvas = document.getElementById('canvas')
  const outPut = ()=>{
    htmlToImgPdf(canvas as HTMLElement,'财务综合统计')
  }
  

    return (
        <div className='SynthesizeFinance'>
          <p className='head'>综合统计</p>
          <Card title="综合统计" type="inner" className='s_content' extra={<HeadButton getFinanceData={getFinanceData} outPut={outPut}></HeadButton>} >
           <div id='canvas'>
           <Descriptions title="订单统计" bordered size='small' column = {1}>
              <Descriptions.Item label="销售总额">{OrderItem.saleAmount}</Descriptions.Item>
              <Descriptions.Item label="有效订单总数">{OrderItem.effectiveOrderNum}</Descriptions.Item>
              <Descriptions.Item label="有效订单总额">{OrderItem.effectiveOrderAmount}</Descriptions.Item>
              <Descriptions.Item label="无效订单总数（取消或超时关闭）">{OrderItem.invalidOrderNum}</Descriptions.Item>
              <Descriptions.Item label="无效订单总额">{OrderItem.invalidOrderAmount}</Descriptions.Item>
              <Descriptions.Item label="已成交订单总数">{OrderItem.doneOderNum}</Descriptions.Item>
              <Descriptions.Item label="已成交订单综合">{OrderItem.doneOrderAmount}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="会员统计" bordered size='small' column = {1} style={{ marginTop:'20px'}}>
              <Descriptions.Item label="用户总数">{VipItem.userNum}</Descriptions.Item>
              <Descriptions.Item label="有订单用户">{VipItem.effectiveOrderUser}</Descriptions.Item>
              <Descriptions.Item label="用户订单总数">{VipItem.userOrderNum}</Descriptions.Item>
              <Descriptions.Item label="用户购物总额">{VipItem.userOderAmount}</Descriptions.Item>
              <Descriptions.Item label="用户购买率">{VipItem.buyPercentage}</Descriptions.Item>
              <Descriptions.Item label="用户平均订单数">{VipItem.averageOrderNum}</Descriptions.Item>
              <Descriptions.Item label="用户平均购物额">{VipItem.averageBuy}</Descriptions.Item>
            </Descriptions>
           </div>
			    </Card>
        </div>
    )
}

export default SynthesizeFinance